<template>
    <Card :bordered="false" :dis-hover="true">
        <p slot="title" style="height:35px;margin-top:5px" align="right">
            <AutoComplete
                    clearable
                    icon="ios-search"
                    placeholder="姓名 / 手机 / 病历号"
                    style="width:250px">
                <div>
                </div>
            </AutoComplete>
        </p>
        <p v-if="datas.length === 0" align="center">
            <img width="20%" src="@/images/noData.png"></img>
        </p>
        <Form ref="formInline" :model="formItem" :rules="ruleForm" :label-width="100">
            <Row type="flex" :gutter="8">
                <Col v-for="item in datas" span="12">
                    <Card style="width:100%;margin-top: 5px">
                        <p style="font-size: 16px" slot="title">
                            <Row>
                                <Col span="12">
                                    <label>{{item.patientName}} - {{item.medicalNumber}}</label>
                                </Col>
                            </Row>
                        </p>
                        <a style="color: #5cadff" v-if="item.status === 0" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #2d8cf0" v-if="item.status === 1" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #ff9900" v-if="item.status === 2" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #ed3f14" v-if="item.status === 3" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <Tabs ref="tabs" @on-click="clickTabPane">
                            <TabPane name="1" label="预约详情" icon="clipboard">
                                <Row>
                                    <Col span="6" align="center">
                                        <label>预约类型：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.type | typeFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>预约时间：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.appointment | dateFormatter}}</label>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <label>预约医生：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.doctorName}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>预约护士：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.nurseName}}</label>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <label>提醒方式：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.remind | remindFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>处理方式：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.process | processFilter}}</label>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <label>主管医生：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.competentDoctor | competentDoctorFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>主管护士：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.competentNurse | competentNurseFilter}}</label>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <label>预约备注：</label>
                                    </Col>
                                    <Col span="18">
                                        <a href="#" @click="editNote">编辑</a>
                                        <p style="height: 50px">{{item.note | noteFilter}}</p>
                                    </Col>
                                </Row>
                            </TabPane>
                            <TabPane name="2" label="主管医护" icon="person">
                                <Row>
                                    <Col span="10">
                                        <FormItem label="主管医生：" prop="doctorId">
                                            <Select transfer clearable v-model="formItem.doctorId" :label-in-value=true @on-change="changeDoctor">
                                                <Option v-for="item in doctors" :value="item.id" :key="item.id">{{ item.username }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="10">
                                        <FormItem label="主管护士：" prop="nurseId">
                                            <Select transfer clearable v-model="formItem.nurseId" :label-in-value=true @on-change="changeNurse">
                                                <Option v-for="item in nurses" :value="item.id" :key="item.id">{{ item.username }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="4" align="center">
                                        <Button style="width: 80%;" type="ghost" @click="setHealthCare(item.patientId)">保存</Button>
                                    </Col>
                                </Row>
                            </TabPane>
                            <TabPane name="3" label="支持医护" icon="person-stalker">
                                <Row>
                                    <Col span="10">
                                        <FormItem label="支持医生：" prop="doctorId">
                                            <Select transfer clearable v-model="formItem.doctorId" :label-in-value=true @on-change="changeDoctor">
                                                <Option v-for="item in doctors" :value="item.id" :key="item.id">{{ item.username }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="10">
                                        <FormItem label="支持护士：" prop="nurseId">
                                            <Select transfer clearable v-model="formItem.nurseId" :label-in-value=true @on-change="changeNurse">
                                                <Option v-for="item in nurses" :value="item.id" :key="item.id">{{ item.username }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="4" align="center">
                                        <Button style="width: 80%" type="ghost" @click="support(item)">保存</Button>
                                    </Col>
                                </Row>
                            </TabPane>
                        </Tabs>
                        <p style="margin-top: 10px" align="right">
                            <ButtonGroup shape="circle">
                                <Button type="ghost" v-for="button in buttons" v-if="button.parentId === menuId" :icon="button.icon" @click="events(button, item)">
                                    {{button.title}}
                                </Button>
                            </ButtonGroup>
                        </p>
                    </Card>
                </Col>
            </Row>
        </Form>
        <Modal v-model="showConfirm" :closable='false' :mask-closable=true :width="800">
            <h3 slot="header" style="color:#2D8CF0">基本信息</h3>
            <Form ref="formItem" :model="patient" :label-width="140">
                <Row>
                    <Col span="20" offset="2">
                    <FormItem label="患者昵称：">
                        <Input size="large" v-model="patient.nickName"></Input>
                    </FormItem>
                    <FormItem label="真实姓名：">
                        <Input size="large" v-model="patient.name"></Input>
                    </FormItem>
                    <FormItem label="患者性别：">
                        <Select v-model="patient.sex" style="width:100%">
                            <Option value="1" :key="1">男</Option>
                            <Option value="2" :key="2">女</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="出生日期：">
                        <DatePicker type="date" v-model="patient.birthday" placeholder="Select date" style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="身份证号码：">
                        <Input size="large" v-model="patient.card" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="现居住地：">
                        <Input size="large" v-model="patient.address" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="常驻地及生活时间：">
                        <Input size="large" v-model="patient.resident" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="籍贯：">
                        <Input size="large" v-model="patient.origin" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="民族：">
                        <Input size="large" v-model="patient.ethnic" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="婚姻：">
                        <Select size="large" v-model="patient.marital" style="width:100%">
                            <Option value="1" :key="1">未婚</Option>
                            <Option value="2" :key="2">已婚</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="文化程度：" prop="itemName">
                        <Select size="large" v-model="patient.culture" style="width:100%">
                            <Option value="1" :key="1">小学</Option>
                            <Option value="2" :key="2">初中</Option>
                            <Option value="3" :key="3">高中</Option>
                            <Option value="4" :key="4">大学</Option>
                            <Option value="5" :key="5">研究生</Option>
                            <Option value="6" :key="6">博士生</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="职业：" prop="itemName">
                        <Select size="large" v-model="patient.job" style="width:100%">
                            <Option value="1" :key="1">公司职员</Option>
                            <Option value="2" :key="2">运动员</Option>
                            <Option value="3" :key="3">演艺业</Option>
                            <Option value="4" :key="4">学生</Option>
                            <Option value="5" :key="5">记者</Option>
                            <Option value="6" :key="6">公务员</Option>
                            <Option value="6" :key="6">其他</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="工作特点：" prop="itemName">
                        <Select size="large" v-model="patient.jobCharact" style="width:100%">
                            <Option value="1" :key="1">户外为主</Option>
                            <Option value="2" :key="2">户内为主</Option>
                            <Option value="3" :key="3">户外户内工作时间没有区别</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="患者来源：" prop="itemName">
                        <Select size="large" v-model="patient.source" style="width:100%">
                            <Option value="1" :key="1">官方微信</Option>
                            <Option value="2" :key="2">官方微博</Option>
                            <Option value="3" :key="3">个人微信</Option>
                            <Option value="4" :key="4">个人微博</Option>
                            <Option value="5" :key="5">官方网站</Option>
                            <Option value="6" :key="6">官方APP</Option>
                            <Option value="7" :key="7">报纸</Option>
                            <Option value="8" :key="8">电视</Option>
                            <Option value="9" :key="9">电台</Option>
                            <Option value="10" :key="10">朋友介绍</Option>
                            <Option value="11" :key="11">家人推荐</Option>
                            <Option value="12" :key="12">框架广告</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="info" @click="confirm">信息确认</Button>
            </div>
        </Modal>
        <Modal v-model="showEditNote" @on-ok="doEditNote" :closable='false' :mask-closable=true :width="500">
            <h3 slot="header" style="color:#2D8CF0">修改备注</h3>
            <Form :model="formItem" :label-width="120">
                <FormItem label="预约备注">
                    <Input v-model="appointmentNote" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入内容..."></Input>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>

<script>
    import iviewButton from '@/view/common/button/Button.vue';
    export default {
        name: 'text-editor',
        components: {
            iviewButton
        },
        data () {
            const validateAppointment = (rule, value, callback) => {
                if (this.selectPane === '4') {
                    if (value === '') {
                        callback(new Error('请选择预约时间'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            return {
                menuId: 2000,
                baseURL: '/user/reservation',
                patientURL: '/user/patient',
                attendanceURL: '/user/attendance',
                showConfirm: false,
                showEditNote: false,
                selectRows: [],
                selectRow: {},
                selectPane: '',
                datas: [],
                doctors: [],
                nurses: [],
                buttons: [],
                healthcare: [],
                appointmentNote: '',
                formItem: {
                    id: '',
                    doctorId: '',
                    doctorName: '',
                    nurseId: '',
                    nurseName: '',
                    appointment: '',
                    note: ''
                },
                patient: {
                    id: '',
                    name: '',
                    nickName: '',
                    sex: '',
                    birthday: '',
                    address: '',
                    resident: '',
                    ethnic: '',
                    marital: '',
                    culture: '',
                    job: '',
                    jobCharact: '',
                    card: '',
                    origin: '',
                    source: ''
                },
                ruleForm: {
                    doctorId: [
                        { required: true, message: '请选择医生', pattern: /.+/, trigger: 'change' }
                    ],
                    nurseId: [
                        { required: true, message: '请选择护士', pattern: /.+/, trigger: 'change' }
                    ],
                    appointment: [
                        { validator: validateAppointment, trigger: 'change' }
                    ]
                }
            };
        },
        filters: {
            statusFilter (value) {
                let temp = ''
                if (value === 0) {
                    temp = '已预约'
                } else if (value === 1) {
                    temp = '已回访'
                } else if (value === 2) {
                    temp = '已到场'
                } else if (value === 3) {
                    temp = '已接诊'
                }
                return temp
            },
            typeFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '复诊'
                } else if (value === 2) {
                    temp = '新诊'
                }
                return temp
            },
            remindFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '短信'
                } else if (value === 2) {
                    temp = '微信'
                } else if (value === 3) {
                    temp = '电话'
                }
                return temp
            },
            processFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '电话随访'
                } else if (value === 2) {
                    temp = '预约到店'
                }
                return temp
            },
            competentDoctorFilter (value) {
                let temp = value
                if (temp === null) {
                    return '无'
                }
                return temp
            },
            competentNurseFilter (value) {
                let temp = value
                if (temp === null) {
                    temp = '无'
                }
                return temp
            },
            noteFilter (value) {
                let temp = value
                if (temp === '') {
                    temp = '未填写'
                }
                return temp
            }
        },
        methods: {
            events (item, row) {
                let path = item.path
                if (path === 'cancel') {
                    this.cancel(row.id)
                } else if (path === 'arrive') {
                    this.arrive(row)
                } else if (path === 'admission') {
                    this.admission(row)
                } else if (path === 'execute') {
                    this.execute(row)
                } else if (path === 'complete') {
                    this.complete(row.id)
                } else if (path === 'reAppointment') {
                    this.reAppointment(row)
                }
            },
            search () {
                let url = this.baseURL + '/reception'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.datas = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            // 修改备注
            editNote () {
                this.showEditNote = true
            },
            doEditNote () {
                let url = this.baseURL + '/'
            },
            cancel (id) {
                let url = this.baseURL + '/checkCancel/' + id
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            this.$Modal.confirm({
                                title: '操作提示',
                                content: '<p>确认取消预约?</p>',
                                onOk: () => {
                                    this.doCancel(id)
                                }
                            })
                        } else {
                            this.$bus.alert('warning', '该记录不符合条件')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                });
            },
            doCancel (id) {
                let url = this.baseURL + '/cancel/' + id
                this.$ajax.post(url).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', msg)
                        this.search()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            arrive (row) {
                let id = row.id
                let url = this.baseURL + '/checkArrived/' + id
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            // 新诊到场要做信息确认
                            if (row.type === 2) {
                                this.selectRow = row
                                // 查询患者信息
                                let url = this.patientURL + '/findById/' + row.patientId
                                this.$ajax.get(url).then(response => {
                                    let {code, data, msg} = response.data
                                    if (code === 0) {
                                        this.patient = data
                                        this.patient.sex = data.sex + ''
                                        this.showConfirm = true
                                    } else {
                                        this.$bus.alert('error', '查询患者信息异常')
                                    }
                                })
                            } else {
                                this.doArrive(id)
                            }
                        } else {
                            this.$bus.alert('warning', '该记录不符合条件')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                });
            },
            confirm () {
                let url = this.patientURL + '/confirm'
                this.$ajax.post(url, this.patient).then(response => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.doArrive(this.selectRow.id);
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            doArrive (id) {
                let url = this.baseURL + '/arrived/' + id
                this.$ajax.post(url).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', '操作成功')
                        this.showConfirm = false
                        this.search()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            admission (row) {
                let url = this.baseURL + '/checkAdmission/' + row.id
                this.$ajax.get(url).then(response => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            this.doAdmission(row)
                        } else {
                            this.$bus.alert('warning', '该记录不符合条件')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            doAdmission (row) {
                let url = this.baseURL + '/admission/' + row.id
                this.$ajax.post(url).then(response => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        let query = {
                            id: row.patientId
                        }
                        this.$bus.toPath('/medical', query)
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            execute (row) {

            },
            complete (id) {
                let url = this.baseURL + '/checkComplete/' + id
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            this.doComplete(id)
                        } else {
                            this.$bus.alert('warning', '该记录不符合条件')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                });
            },
            doComplete (id) {
                let url = this.baseURL + '/complete/' + id
                this.$ajax.post(url).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', msg)
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                });
            },
            setHealthCare (id) {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        this.formItem.id = id
                        let url = this.patientURL + '/setHealthCare'
                        this.$ajax.post(url, this.formItem).then((response) => {
                            let {code, msg} = response.data
                            if (code === 0) {
                                this.$bus.alert('success', msg)
                                this.formItem.id = ''
                                this.$bus.init(this.formItem)
                                this.init()
                            } else {
                                this.$bus.alert('error', msg)
                            }
                        })
                    }
                })
            },
            support (item) {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        if (item.status < 3) {
                            let requestBody = {}
                            Object.assign(requestBody, item)
                            requestBody.doctorId = this.formItem.doctorId
                            requestBody.doctorName = this.formItem.doctorName
                            requestBody.nurseId = this.formItem.nurseId
                            requestBody.nurseName = this.formItem.nurseName
                            let url = this.baseURL + '/support'
                            this.$ajax.post(url, requestBody).then((response) => {
                                let {code, msg} = response.data
                                if (code === 0) {
                                    this.$bus.alert('success', msg)
                                    this.formItem.id = ''
                                    this.$bus.init(this.formItem)
                                    this.init()
                                } else {
                                    this.$bus.alert('error', msg)
                                }
                            })

                        } else {
                            this.$bus.alert('warning', '该记录不符合操作条件')
                        }
                    }
                })
            },
            reAppointment (item) {
                let url = this.baseURL + '/checkChange/' + item.id
                this.$ajax.get(url).then(response => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            this.$bus.toPath('/reservation/details', item)
                        } else {
                            this.$bus.alert('warning', '该记录不符合条件')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                // 加载按钮组
                this.loadButton()
                // 查询
                this.search();
                // 重置表单
                this.reset()
            },
            load () {
                // 加载医生数据
                this.loadDoctor()
                // 加载护士数据
                this.loadNurse()
            },
            reset () {
                this.$refs.formInline.resetFields()
            },
            loadDoctor () {
                this.$ajax.get('/user/findByJob/1').then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.doctors = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadNurse () {
                this.$ajax.get('/user/findByJob/2').then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.nurses = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadButton () {
                this.$ajax.get('/user/buttons/' + this.menuId).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.buttons = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            changeAppointment (val, type) {
                if (val !== '') {
                    let url = this.attendanceURL + '/getHealthcare/' + val + ':00/' + this.selectRow.type
                    this.$ajax.get(url).then((response) => {
                        let {code, data} = response.data
                        if (code === 0) {
                            this.healthcare = data
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                }else{
                    this.doctors = []
                    this.nurses = []
                }
            },
            refresh () {
                this.$refs.iviewTable.refresh()
            },
            changeDoctor (option) {
                this.formItem.doctorId = option.value
                 if (option.label) {
                     this.formItem.doctorName = option.label
                 }
            },
            changeNurse (option) {
                this.formItem.nurseId = option.value
                this.formItem.nurseName = option.label
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            clickTabPane (name) {
                this.reset()
                this.selectPane = name
                if (name === '4') {
                    this.doctors = []
                    this.nurses = []
                } else {
                    this.load()
                }
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style>
</style>
